<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改表格结构</title>
    <script>
        function addRow(tableId){
            //1.找到表格
            var table=document.getElementById(tableId);
            //2.新建行
            var row=table.insertRow(table.rows.length);
            //3.新建列
            for(var i=0;i<table.rows[0].cells.length;i++){
                var newcell=row.insertCell(i);
                newcell.innerHTML=table.rows[0].cells[i].innerHTML;
            }
        }
        function  deleteRow(tableId) {
            //1.找到表格
            var table=document.getElementById(tableId);
            //2.删除行
            for(var i=table.rows.length-1;i>=0;i--){
                var row=table.rows[i];
                var chkbox=row.cells[0].childNodes[0];
                if(chkbox!=null && chkbox.checked === true){
                    table.deleteRow(i);
                }
            }
        }
    </script>
</head>
<body>
      <input type="button" value="Add Row" onclick="addRow('dataTable')"/>
      <input type="button" value="Delete Row" onclick="deleteRow('dataTable')">
      <table id="dataTable" width="350px" border="2">
          <tr>
              <td><input type="checkbox" name="chk"/></td>
              <td><input type="text" name="txt"/></td>
              <td>
                  <select name="country">
                      <option value="zh">China</option>
                      <option value="in">India</option>
                      <option value="de">Germany</option>
                      <option value="fr">France</option>
                      <option value="us">United States</option>
                      <option value="ch">Switzerland</option>
                  </select>
              </td>
          </tr>

      </table>
</body>
</html>